<template>
    <el-dialog v-bind="$attrs" v-on="$listeners" width="32%"  @close="onClose" title="角色管理">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="83px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formData.roleName" placeholder="请输入角色名称" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import rolesApi from "../../api/rolesApi";

    export default {
        name: "roleForm",
        inheritAttrs: false,
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    id:"",
                    roleName: "",
                },
                rules: {
                    roleName: [{
                        required: true,
                        message: '请输入角色名称',
                        trigger: 'blur'
                    }],
                },
            }
        },
        methods: {
            open(id) {
                if(id!=""){
                    rolesApi.get(id).then(res=>{
                        this.formData=res.data
                    })
                }
                this.$emit('update:visible', true)
            },
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.$emit('update:visible', false)
                this.$refs['elForm'].resetFields()
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        if(this.formData.id!=""){
                            rolesApi.update(this.formData).then(res=>{
                                this.close()
                                this.$emit('query')
                            })
                        }else {
                            rolesApi.save(this.formData).then(res=>{
                                this.close()
                                this.$emit('query')
                            })
                        }

                    }

                })
            },
        }
    }
</script>

<style scoped>

</style>